<template>
	<view class="container">
		<uv-navbar :title="title" :autoBack="false" :bgColor="bgColor" :titleStyle="titleStyle" titleWidth="300rpx"
			:fixed="fixed" @leftClick="$emit('leftClick')">
			<template v-slot:left>
				<view class="uv-nav-slot u-flex" v-if="isBack" :style="{backgroundColor:leftBackGround}">
					<uv-icon name="arrow-left" size="22" :color="color" @click="toBackChange(1)"></uv-icon>
					<uv-line direction="column" :color="color" :hairline="false" length="18" margin="0 8px"></uv-line>
					<uv-icon name="home" size="24" :color="color" @click="toBackChange(2)"></uv-icon>
				</view>
			</template>
		</uv-navbar>
		<view class="footer"
			:style="{top: getNavbarHeight() + 'px',backgroundColor:footerBackgroundColor,position: fixed?'fixed':'sticky'}">
			<slot name="footer"></slot>
		</view>
	</view>
</template>

<script setup>
	import { switchTab, toBack } from '@/utils/router.js'
	import { getNavbarHeight } from '@/utils/system.js';
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		isBack: {
			type: Boolean,
			default: true
		},
		bgColor: {
			type: String,
			default: '#FFFFFF'
		},
		color: {
			type: String,
			default: 'rgb(96, 98, 102)'
		},
		titleStyle: {
			type: Object,
			default: () => {}
		},
		fixed: {
			type: Boolean,
			default: true
		},
		leftBackGround: {
			type: String,
			default: "transparent"
		},
		footerBackgroundColor: {
			type: String,
			default: "transparent"
		},
	})

	const toBackChange = (type = 1) => {
		if (type == 1) {
			let pages = getCurrentPages();
			var beforePage = pages[pages.length - 2]; // 获取上一个页面实例对象
			// 没有上一页 || 上一页是否是验证码登录页
			if (beforePage === undefined) {
				switchTab('/pages/index/index');
			} else {
				toBack();
			}
		} else {
			switchTab('/pages/index/index')
		}
	}
</script>

<style lang="scss" scoped>
	.uv-nav-slot {
		padding: 5rpx 15rpx;
		border: 2rpx solid #dadbde;
		border-radius: 50rpx;
	}

	.footer {
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 1;
	}
</style>